<template>
  <div class="bg-white _p-20">
    <div class="fz-16 title linh-48 _mb-10">运营设置</div>
    <a-form-model
      class="_pt-10"
      ref="form"
      :model="form"
      labelAlign="right"
      layout="horizontal"
      :rules="rules"
      :labelCol="{
        xs: { span: 24 },
        sm: { span: 3 }
      }"
      :wrapperCol="{
        xs: { span: 24 },
        sm: { span: 12 }
      }"
    >
    <a-form-model-item label="公开活动报名人数：">
        <div class="disFlxAC">
          <SSwitch
            :modelValue.sync="form.openRegNum"
            checkedChildren="是"
            :checkedValue="1"
            unCheckedChildren="否"
            :unCheckedValue="0"
            :disabled="disableEditing"
          />
          <span class="tips">（公开活动报名人数后，用户可以在小程序活动列表查看到报名人数）</span>

          <!-- <a-popover title="" placement="rightBottom">
            <template slot="content">
              <viewer :images="[openInviteStatusImg]">
                <img :src="openInviteStatusImg" height="400px" />
              </viewer>
            </template>
            <a-button type="link">
              查看示例
            </a-button>
          </a-popover> -->
        </div>
      </a-form-model-item>
      <a-form-model-item label="公开邀约排行榜：">
        <div class="disFlxAC">
          <SSwitch
            :modelValue.sync="form.openInviteStatus"
            checkedChildren="是"
            :checkedValue="1"
            unCheckedChildren="否"
            :unCheckedValue="0"
            :disabled="disableEditing"
          />
          <span class="tips">（公开邀约排行榜后，用户可以在小程序活动详情页看见其他人邀约数据。）</span>

          <a-popover title="" placement="rightBottom">
            <template slot="content">
              <viewer :images="[openInviteStatusImg]">
                <img :src="openInviteStatusImg" height="400px" />
              </viewer>
            </template>
            <a-button type="link">
              查看示例
            </a-button>
          </a-popover>
        </div>
      </a-form-model-item>
      <a-form-model-item label="公开人脉广场：">
        <div class="disFlxAC">
          <SSwitch
            :modelValue.sync="form.displayRegister"
            checkedChildren="是"
            :checkedValue="1"
            unCheckedChildren="否"
            :unCheckedValue="0"
            :disabled="disableEditing"
          />
          <span class="tips">
            （开启后所有人可看已报名的、会内人脉信息，可增加参会人员的获得感，促进更多人报名参会）
          </span>
        </div>
        <div class="_p-20 disFlx" style="background-color: #F7F8FA;">
          <div class="_mr-10 disFlxAC" style="flex-wrap: nowrap;white-space: nowrap;">
            台卡二维码物料：
            <a-popover title="台卡二维码入口" placement="rightBottom">
              <template slot="content">
                可以将二维码印刷在桌卡等地方，方便参加活动的人了解活动参与者，并可通过人脉广场链接合作，给活动参与者更大的获得感。<br />
                台卡二维码需要在活动发布后前往【活动管理】-【签到码/物料管理】-【大屏/台卡物料管理】下载二维码；
              </template>
              <a-icon type="question-circle" style="color:#FF7D00 ;" />
            </a-popover>
          </div>
          <div style="white-space: nowrap;">
            台卡二维码物料需要在活动发布后前往【活动管理】-【签到码/物料管理】-【大屏/台卡物料管理】下载二维码；
          </div>
        </div>
      </a-form-model-item>
      <a-form-model-item v-if="!disabled" label="现场人脉大屏：">
        <div class="disFlxAC">
          <SSwitch
            :modelValue.sync="form.contactsBiConfig.configStatus"
            checkedChildren="是"
            :checkedValue="1"
            unCheckedChildren="否"
            :unCheckedValue="0"
            :disabled="disableEditing"
          />
          <span class="tips">
            （可以在活动现场大屏轮播展示参会者基础信息，大屏链接在保存活动后才生效）
          </span>
        </div>
        <div v-if="form.contactsBiConfig.configStatus" style="background-color: #F7F8FA;padding: 20px;">
          <a-form-model-item
            label="人脉大屏背景图："
            :labelCol="{
              xs: { span: 8 },
              sm: { span: 4 },
              xl: { span: 5 },
              xxl: { span: 4 }
            }"
            :wrapperCol="{
              xs: { span: 16 },
              sm: { span: 20 },
              xl: { span: 19 },
              xxl: { span: 20 }
            }"
            labelAlign="left"
            prop="contactsBiConfig.backImage"
          >
            <UploadImg
              v-model="form.contactsBiConfig.backImage"
              warehouse
              cropper
              :width="160"
              :height="90"
              :cropperEnlarge="2"
              :disabled="disableEditing"
            >
            </UploadImg>
            <div style="color: #FF7D00;">
              注意：背景图尽可能与现场大屏尺寸比例相同，并且宽高大于1000px以避免清晰度不足显示模糊；
            </div>
          </a-form-model-item>

          <div v-if="form.contactsBiConfig.configStatus" class="_p-20 disFlxAC" style="background-color: #F7F8FA;">
            <div class="_mr-10 disFlxAC">
            <span style="white-space: nowrap;">  大屏展示链接地址：</span>
              <a-popover title="现场人脉大屏" placement="rightBottom">
                <template slot="content">
                  大屏链接在保存活动后才生效；<br />
                  可以在活动现场打开大屏链接网页，参会者报名参加后将会在大屏展示到场的参会者信息。<br />
                  后台导入的报名信息，如果系统内没有手机号相同的用户，则该参会者信息需要参会者本人扫码签到后才可展示。
                </template>
                <a-icon type="question-circle" style="color:#FF7D00 ;" />
              </a-popover>
            </div>
            <div style="white-space: nowrap;">
              {{ form.bigScreenShowUrl || '活动创建后自动生成' }}
            </div>
            <a-button
              v-if="form.bigScreenShowUrl"
              type="primary"
              ghost
              class="_ml-10"
              size="small"
              @click="() => handleCopy(form.bigScreenShowUrl)"
              >复制链接</a-button
            >
          </div>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import SSwitch from '@/components/Switch'
import { cloneDeep } from 'lodash-es'
import { ActivitySettlementStatusEnum } from '@/enums/activity'
import UploadImg from '@/components/UpFile/uploadImg'
export default {
  components: {
    SSwitch,
    UploadImg
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    info: {
      handler(val) {
        if (val.id) {
          this.form.openInviteStatus = val.openInviteStatus
          this.form.openRegNum = val.openRegNum
          this.form.displayRegister = val.displayRegister
          this.form.bigScreenShowUrl = val.bigScreenShowUrl
          this.form.contactsBiConfig = cloneDeep(val.contactsBiConfig)
        }
      },
      deep: true,
      immediate: true
    }
  },

  computed: {
    disabled() {
      return this.info.activityType === 'other_join' // 协办方
    },
    disableEditing() {
      return (
        [
          ActivitySettlementStatusEnum.PROGRESS,
          ActivitySettlementStatusEnum.SUCCESS,
          ActivitySettlementStatusEnum.PART_SUCCESS
        ].includes(this.info.settleStatus) || this.disabled
      )
    }
  },
  data() {
    return {
      openInviteStatusImg: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/activity_invitation.png',
      linkUrl: 'https//:www.hbkj.com',
      form: {
        openInviteStatus: 0,
        openRegNum:1,
        bigScreenShowUrl: '',
        displayRegister: 1,
        contactsBiConfig: {
          configStatus: 0,
          backImage: ''
        }
      },
      rules: {
        'contactsBiConfig.backImage': [{ required: true, message: '请上传人脉背景大图', trigger: ['blur', 'change'] }]
      }
    }
  },
  methods: {
    saveForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve(cloneDeep(this.form))
          } else {
            this.$nextTick(() => {
              const targetElement = document.querySelector('.has-error')
              console.log(targetElement)
              if (targetElement) {
                targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
              }
            }, 100)
            reject('活动基础信息表单校验未通过')
          }
        })
      })
    },
    handleCopy(text) {
      this.$copyText(text).then(
        () => {
          this.$message.success('复制成功')
        },
        err => {
          console.error('复制失败：', err)
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  color: #1d2129;
  border-bottom: solid 1px #e5e6eb;
}

.viewer-img {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
}

.tips {
  color: #86909c;
}
</style>
